<script lang="ts" setup>
defineOptions({
  name: 'HomeBanner',
})

const emit = defineEmits<Emits>()

interface Props {
  searchValue: string
}

interface Emits {
  (e: 'search', value: string): void
}

// Banner背景和文字
const bannerData = ref({
  background: '/static/images/home/home_bg.png',
  text: '/static/images/home/banner_text.png',
})

// 搜索框内容
const searchValue = ref('')

// 搜索功能
function handleSearch() {
  console.log('搜索内容:', searchValue.value)
  emit('search', searchValue.value)
}

// 扫描功能
function handleScan() {
  console.log('启动扫描功能')
  uni.showToast({
    title: '扫描功能开发中',
    icon: 'none',
  })
}
</script>

<template>
  <view class="relative h-50 overflow-hidden">
    <image :src="bannerData.background" class="h-full w-full" mode="aspectFill" />
    <image
      :src="bannerData.text"
      class="absolute left-1/2 top-1/2 max-h-3/5 max-w-4/5 transform -translate-x-1/2 -translate-y-1/2"
      mode="aspectFit"
    />
    <view class="absolute bottom-0 left-0 right-0 p-2">
      <view class="flex items-center rounded-2xl bg-white px-2 py-2 shadow-lg">
        <!-- 搜索图标 -->
        <view class="mr-2 h-5 w-5 flex items-center justify-center">
          <text class="i-carbon-search text-lg text-gray-500" />
        </view>
        <input
          v-model="searchValue"
          placeholder="请输入搜索内容"
          class="flex-1 text-sm text-gray-800"
          @confirm="handleSearch"
        >
        <!-- 扫描图标 -->
        <view
          class="ml-2 h-8 w-8 flex items-center justify-center rounded-full bg-blue-100"
          @click="handleScan"
        >
          <text class="i-carbon-scan-alt" text-lg text-blue-500 />
        </view>
      </view>
    </view>
  </view>
</template>
